<template>
	<view class="container">
		<view class="page-body">
			<form @submit="formSubmit" @reset="formReset" v-if="false">
				<view class="page-section page-section-gap">
					<view class="page-section-title">用户相关信息</view>
				</view>
				<view class="page-section page-section-gap">
					<radio-group name="gender">
						<label>
							性别：
							<radio value="1" checked="true" />
							男
						</label>
						<label>
							<radio value="0" />
							女
						</label>
					</radio-group>
				</view>
				<view class="page-section page-section-gap">
					<view class="page-section-title">身高</view>
					<slider value="170" name="height" show-value min="40" max="240"></slider>
				</view>
				<view class="page-section page-section-gap">
					<view class="page-section-title">年龄</view>
					<slider value="30" name="age" show-value min="10" max="70"></slider>
				</view>
				<view class="page-section page-section-gap">
					<label>
						是否为运动员
						<switch name="isSport" />
					</label>
				</view>
				<view class="page-section page-section-gap">
					<radio-group name="unit">
						<label>
							单位：
							<radio value="kg" checked="true" />
							kg
						</label>
						<label>
							<radio value="lb" />
							lb
						</label>
						<label>
							<radio value="jin" />
							斤
						</label>
						<label>
							<radio value="st" />
							st
						</label>
					</radio-group>
				</view>
				<view class="page-section page-section-gap">
					<label>
						是否自动停止扫描
						<switch name="autoStopDiscovery" :checked="true" />
					</label>
				</view>

				<!-- <view class="btn-area">
					<button style="margin: 30rpx 0" type="primary" form-type="submit">开始身高体重测量</button>
				</view> -->
			</form>
			<view class="btn-area">
				<!-- <button style="margin: 30rpx 0" type="primary" @tap="goBmi">开始身高体重测量</button> -->
				<button style="margin: 30rpx 0;margin-top: 20rpx;" type="primary" @tap="goBloodPressure">开始血压测量</button>
				<button style="margin: 30rpx 0" type="primary" @tap="goBmiNew">开始身高体重测量</button>
			</view>
			
		</view>

		<!-- <button @click="initPlugin">初始化插件</button>
		<button @click="startScan">开始扫描蓝牙设备</button>
		<view v-for="(item,index) in devices" :key="index" class="device">
			{{ item.deviceName }} - {{ item.deviceId }}
		</view> -->
	</view>
</template>

<script>
	const { QNMPPlugin, QNConsts } = requirePlugin('QNBleApi');
	
	const APPID = 'wxf73463ef86a8e8ad' // 替换为客户自己的 AppID
	export default {
		data() {
			return {
				bleApi: null,
				devices: []
			}
		},
		methods: {
			formSubmit(e) {
				const form = e.detail.value;
				form.id = 1;
				const paramString = JSON.stringify(form);
				uni.navigateTo({
					url: `/pages/bmi/index?form=${paramString}`
				});
			},
			goBmi(){
				uni.navigateTo({
					url: `/pages/scale/index`
				});
			},
			goBloodPressure(){
				uni.navigateTo({
					url: `/pages/bloodPressure/index`
				});
			},
			goBmiNew(){
				uni.navigateTo({
					url: `/pages/scale/two`
				});
			},
			formReset(e) {
				// 重置表单逻辑
			},
			// 日志
			logger() {
				const wxlogger = uni.getLogManager && uni.getLogManager({
					level: 0
				})
				return {
					log: (...params) => {
						console.log(...params)
						wxlogger && wxlogger.log(...params)
					}
				}
			},
			initPlugin() {
				// 实例化插件
				this.bleApi = new QNMPPlugin({
					appId: APPID,
					mpwx: wx,
					logger: this.logger(),
				})

				this.bleApi.onError = (err) => console.error('捕捉到错误', err.detail)
				
				this.bleApi.onReady = ({
					bleEnableState
				}) => {
					if (bleEnableState) {
						this.bleApi.startBleDeviceDiscovery()
					} else {
						console.log('蓝牙状态为关闭')
					}
				}
				
				this.bleApi.setBleEventListener(this.bleEventListener())
				this.bleApi.init()
			},
			startScan() {
				if (!this.bleApi) {
					return uni.showToast({
						title: '请先初始化插件',
						icon: 'none'
					})
				}

				// 开始扫描
				this.bleApi.startBleDeviceDiscovery({
					services: [],
					allowDuplicatesKey: false
				}, (res) => {
					console.log('扫描到设备:', res)
					this.devices.push(res)
				})
			}
		}
	}
</script>

<style>
	/* 可以在这里添加样式 */
	.container {
		padding: 20rpx;
	}

	.page-body {
		background-color: #fff;
	}

	.page-section {
		margin-bottom: 30rpx;
	}

	.page-section-title {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 20rpx;
	}

	.btn-area {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
	}
</style>